<!DOCTYPE html>
<html lang="en">
<head>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        #admin_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
        }
        #admin_table_wrapper {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:calc(100% - 16px);
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:13px;
            color:#333;
        }
        #admin_update_submit {
            display:block;
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            font-size:15px;
            border-radius:5px;
            margin-top:10px;
            cursor:pointer;
        }
        #admin_update_submit:hover {
            filter:brightness(110%);
        }
        #admin_table_list {
            width:100%;
            table-layout:fixed
        }
        #admin_table_list td {
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding:10px 0;
            background-color:#ccc;
            font-size:12px;
        }
        #update_admin_form_wrapper {
            display:none;
            position: fixed;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.3);
            left:0;
            top:0;
        }
        #update_admin_form {
            display:block;
            width: 300px;
            padding: 15px;
            margin:50px auto;
            background:#fff;
            border-radius:8px;
            box-shadow: 0 0 10px #757575;
            overflow-y: scroll;
        }
        .admin_state_radio {
            height:15px;
            float:left;
            line-height:15px;
        }
        .admin_state_radio > span {
            font-size:13px;
            float:right;
            margin:0 15px 0 5px;
        }
        .admin_state_radio > input {
            width:15px;
            height:15px;
            margin:0;
        }
        #admin_update_cancel {
            width:calc(20% - 16px);
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#999;
            color:#fff;
            font-weight:600;
            font-size:15px;
            border-radius:5px;
            margin-top:10px;
            cursor:pointer;
            text-align:center;
            margin-right:20px;
        }
        #admin_update_cancel:hover {
            filter: brightness(110%);
        }
        .update_button {
            cursor:pointer;
            text-decoration: underline;
            font-weight:600;
        }
        .page_button {
            font-size:13px;
            color:#333;
            cursor:pointer;
        }
        .page_button:hover {
            text-decoration: underline;
            font-weight:600;
        }
        #quick_page {
            width:50px;
            border:none;
            border-bottom:1px #333 solid;
            font-size:13px;
            color:#333;
            text-align:center;
            outline:none;
        }
        #role_choose_wrapper {
            margin-top:30px;
            margin-left:15px;
        }
        .role_checkbox {
            width:calc(100% - 30px);
            padding:5px 0 5px 0;
            height:15px;
            font-size:12px;
            color:#333;
            line-height:15px;
        }
        .role_checkbox > input[type=checkbox] {
            float:left;
            width:15px;
            height:15px;
            margin-right:15px;
        }
    </style>
</head>
<body>
    <div id="admin_wrapper">
        <div id="update_admin_form_wrapper">
            <input type="hidden" value="${request.contextPath}" id="root" />
            <form id="update_admin_form" target="rfFrame" method="post">
                <h4 style="margin:0">管理员信息修改: </h4>
                <input type="hidden" id="admin_id" name="admin_id" value="-1" />
                <input type="text" id="admin_username" class="form_input_text" name="admin_username" placeholder="请输入用户名..." autocomplete="off" onkeyup="value=value.replace(/\W/,'')" />
                <input type="password" id="admin_password" class="form_input_text" name="admin_password" placeholder="请输入密码..." autocomplete="off" />
                <input type="text" id="admin_email" class="form_input_text" name="admin_email" placeholder="请输入邮箱..." autocomplete="off" onkeyup="value=value.replace(/\W/,'')" />
                <div style="margin-top:30px">
                    <div class="admin_state_radio">
                        <input type="radio" name="admin_state" value="0" checked /><span>可用</span>
                    </div>
                    <div class="admin_state_radio">
                        <input type="radio" name="admin_state" value="1" /><span>冻结</span>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div id="role_choose_wrapper">
                    <h4>选择角色: </h4>
                </div>
                <input type="submit" id="admin_update_submit" value="修改" />
                <div id="admin_update_cancel">取消</div>
                <div style="clear:both"></div>
                <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            </form>
        </div>
        <div class="wrapper_head">
            <h2>管理员修改</h2>
        </div>
        <div id="admin_table_wrapper">
            <h3 style="margin-bottom:30px">管理员列表: </h3>
            <table id="admin_table_list" cellspacing="2">
                <tr id="admin_table_head">
                    <td style="width:5%">Id</td>
                    <td style="width:15%">用户名</td>
                    <td style="width:15%">角色</td>
                    <td style="width:15%">密码</td>
                    <td style="width:15%">注册时间</td>
                    <td style="width:20%">邮箱地址</td>
                    <td style="width:7%">状态</td>
                    <td style="width:8%">操作</td>
                </tr>
            </table>
            <div style="text-align:center">
                <input type="hidden" id="current_page" value="1" />
                <span onclick="page(0)" class="page_button">首页</span>
                <span onclick="page(1)" class="page_button">上一页</span>
                <input type="text" id="quick_page" value="1" onblur="quickPage(this)" /><span id="page_count" style="font-size:13px;color:#333"></span>
                <span onclick="page(2)" class="page_button">下一页</span>
                <span onclick="page(3)" class="page_button">尾页</span>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</body>
<script>
    var currentPage = 1;
    var pageCount = 1;
    getAdmins(1);
    function quickPage(p) {
        var i = $(p).val();
        if(!(i <= 0 || i > pageCount)) {
            getAdmins(i);
        }
    }
    function page(type) {
        if(type == 0 && currentPage > 1) {
            currentPage = 1;
            getAdmins(1);
        }else if(type == 1 && currentPage > 1) {
            currentPage = currentPage - 1;
            getAdmins(currentPage);
        }else if(type == 2 && currentPage < pageCount) {
            currentPage = currentPage + 1;
            getAdmins(currentPage);
        }else if(type == 3 && currentPage < pageCount) {
            currentPage = pageCount;
            getAdmins(currentPage);
        }
        $("#quick_page").val(currentPage);
    }
    function getAdmins(page) {
        if(page <= 0) {
            return false;
        }else {
            $.ajax({
                url: $("#root").val()+"/getAdmins",
                type: "post",
                data: {page: page},
                async: false,
                dataType: "text",
                success: function(data) {
                    if(data != "") {
                        var json = data.substring(0, data.lastIndexOf("-"));
                        pageCount = data.substring(data.lastIndexOf("-")+1);
                        $("#admin_table_head").nextAll().remove();
                       json = JSON.parse(json);
                       for(var j in json) {
                           var date = json[j].adminTime;
                           var state;
                           if(json[j].state == 0)
                               state = "<span style='color:#008000'>正常</span>";
                           else
                               state = "<span style='color:#f00'>冻结</span>";
                           $("<tr><td>"+json[j].id+"</td><td>"+json[j].username+"</td><td></td><td>"+json[j].password+"</td><td>"+date+"</td><td>"+json[j].email+"</td><td>"+state+"</td><td><div onclick='updateForm(\""+json[j].id+", "+json[j].username+", "+json[j].password+", "+json[j].email+", "+json[j].state+"\")' class='update_button'>修改</div></td></tr>").appendTo($("#admin_table_list"));
                       }
                       $("#page_count").html("/"+pageCount);
                       $("#quick_page").val(page);
                    }
                },
                error: function(data, type, err) {
                    alert(type+"---"+err);
                    return false;
                }
            })
        }
    }
    function updateForm(i) {
        var s = i.split(",");
        if(s[0] <= 0) {
            return;
        }else {
            $("#update_admin_form_wrapper").css("display", "block");
            $("#admin_id").val(s[0].trim());
            $("#admin_username").val(s[1].trim());
            $("#admin_password").val(s[2].trim());
            $("#admin_email").val(s[3].trim());
            if(s[4] == 0) {
                $(".admin_state_radio:first").children("input").prop("checked", true);
                $(".admin_state_radio:last").children("input").prop("checked", false);
            }else {
                $(".admin_state_radio:last").children("input").prop("checked", true);
                $(".admin_state_radio:first").children("input").prop("checked", false);
            }
        }
    }
    $("#admin_update_cancel").click(function() {
        $("#update_admin_form_wrapper").css("display", "none");
    })
    $("#update_admin_form").submit(function() {
        var username = $("#admin_username").val();
        var password = $("#admin_password").val();
        var email = $("#admin_email").val();
        var id = $("#admin_id").val();
        if(username.trim() == "") {
            alert("用户名不能为空!");
            return false;
        }
        if(password.trim() == "") {
            alert("密码不能为空!");
            return false;
        }
        if(email.trim() == "") {
            alert("邮箱地址不能为空!");
            return false;
        }
        if(id == -1) {
            alert("用户不存在!");
            return false;
        }
        $.ajax({
            url: $("#root").val()+"/updateAdmin",
            type: "post",
            data: $(this).serialize(),
            dataType: "text",
            success: function(data) {
                if(data == "success") {
                    $("#update_admin_form_wrapper").css("display", "none");
                    $("#admin_id").val(-1);
                    $("#admin_username").val("");
                    $("#admin_password").val("");
                    $("#admin_email").val("");
                    currentPage = 1;
                    getAdmins(1);
                    getRoleList();
                    alert("修改成功!");
                }
            },
            error: function(data, type, err) {
                alert(type+"---"+err);
                return false;
            }
        })
    })

    getRoleList();
    function getRoleList() {
        $.ajax({
            url: "${request.contextPath}/getRoleList",
            async: false,
            dataType: "text",
            success: function(data) {
                if(data != "") {
                    $("#role_choose_wrapper").html("<h4>选择角色: </h4>");
                    var json = JSON.parse(data);
                    for(var j in json) {
                        $("<div class='role_checkbox'><input type='checkbox' value='"+json[j].id+"' name='role_checkbox' /><span>"+json[j].name+"</span> </div>").appendTo($("#role_choose_wrapper"));
                    }
                }
            },
            error: function(data) {

            }
        })
    }
    function checkRoles() {
        var id = $("#admin_id").val();
        if(id != -1) {
            $.ajax({
                url: "${request.contextPath}/getAdminRoles",
                async: false,
                data: {adminId: id},
                dataType: "text",
                success: function(data) {
                    if(data == "idError") {

                    }else if(data == "error") {

                    }else {
                        var json = JSON.parse(data);



                    }
                }
            })
        }
    }
</script>
</html>